<!-- 首页 -->
<template>
  <div class="home">
    <van-tabs :active="active" @change="onChange">
      <van-tab v-for="(xwlitem,index) in zongshuju" :title="xwlitem.type_name" :key="index">
        <div class="goods">
          <div
            class="mercha"
            v-for="(drink,index1) in xwlitem.List"
            :key="index1"
            @click="trade_yin(drink)"
          >
            <div class="logs-img">
              <img :src="drink.picture" mode="widthFix" />
            </div>
            <div class="xwl-hangao">
              <p class="goods-name">{{drink.name}}</p>
              <p class="goods-price">￥{{drink.price}}</p>
            </div>
            <div class="kuchun">
              <span>库存:{{drink.stock}}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部结算 -->
    <div class="settlement">
      <div style="margin-left: 30rpx;margin-right: 30rpx;">
        <van-icon name="shopping-cart-o" info="9" size="26px" color="#F29513" />
      </div>
      <p class="heji-p">查看购物车</p>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      active: 0, // 导航栏标签
      // username: "全部",
      items: [], // 商品总数据
      zongshuju: [], // 分类后的数组
      ordercode: "1030178328" // 机器号
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onChange(event) {},
    // 根据货道号降序
    compare(property, desc) {
      console.log("排序" + property + ":" + desc);
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        var pa1 = a[desc];
        var pa2 = b[desc];
        if (pa1 <= 0 || pa2 <= 0) {
          return pa2 - pa1;
        } else {
          return value1 - value2;
        }
      };
    },
    // 分类数组
    trade_yin(drink) {}
  },
  onLoad() {
    var listes = {
      jqCode: this.ordercode
    };
    this.$store
      .dispatch("commodity_list", listes)
      .then(data => {
        console.log(data);
        var arrtest = data.data;
        // 商品排序
        this.items = arrtest.sort(this.compare("number", "stock"));
        // 数组拆分
        var xwlarr = this.items;
        let dataArr = [];
        dataArr.push({
          type_name: "全部",
          List: arrtest
        });
        xwlarr.map(mapItem => {
          // if (dataArr.length == 0) {
          //   dataArr.push({
          //     type_name: mapItem.type_name,
          //     List: [mapItem]
          //   });
          // } else {
          let res = dataArr.some(item => {
            //判断相同日期，有就添加到当前项
            if (item.type_name == mapItem.type_name) {
              item.List.push(mapItem);
              return true;
            }
          });
          if (!res) {
            //如果没找相同日期添加一个新对象
            dataArr.push({
              type_name: mapItem.type_name,
              List: [mapItem]
            });
          }
        });
        console.log(dataArr);
        // 拆分后的数组
        this.zongshuju = dataArr;
      })
      .catch(error => {
        console.log("请求失败" + error);
      });
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.home {
  padding-bottom: 100rpx;
}
/* 分类数组 */
.mercha {
  width: 33.3%;
  float: left;
  position: relative;
}
.logs-img {
  width: 100%;
  height: 180rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logs-img > img {
  display: inline-block;
  max-width: 38%;
  max-height: 65%;
  background-size: cover;
}
/* 商品标题 */
.xwl-hangao {
  width: 100%;
}
.goods-name {
  font-size: 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
/* 价格 */
.goods-price {
  font-size: 30rpx;
  color: #f49518;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.kuchun {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
/* 结算 */
.settlement {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
</style>